import { useContext } from "react";
import Anchors from "./Anchors";
import CenterText from "./CenterText";
import { BaseContext, NodeProp } from "./ContainerProvider";

export default function BaseNode(
  props: NodeProp & { index: number; stroke: string }
) {
  const { position, width, height, type, index, fill, stroke, href } = props;

  const { x, y } = position;

  const { events, dispatch, state } = useContext(BaseContext);

  function handleDragStart(e: React.MouseEvent) {
    events.on("dragStart", () => {
      const offsetX = e.clientX - x;
      const offsetY = e.clientY - y;
      return { offsetX, offsetY, index };
    });
  }

  function showAnchor() {
    const newNode = state.nodes[index];
    newNode.showAnchor = true;
    dispatch({
      type: "nodeChange",
      payload: {
        index,
        newNode,
      },
    });
  }

  function hideAnchor() {
    const newNode = state.nodes[index];
    newNode.showAnchor = false;
    setTimeout(() => {
      dispatch({
        type: "nodeChange",
        payload: {
          index,
          newNode,
        },
      });
    }, 1000);
  }

  function setCurrentNode(e: React.MouseEvent) {
    e.stopPropagation();
    dispatch({
      type: "setCurrent",
      payload: props,
    });
  }

  function getContent(type: string) {
    switch (type) {
      case "rect":
        return (
          <rect
            x={x}
            y={y}
            width={width}
            height={height}
            fill={fill}
            stroke={stroke}
          ></rect>
        );
      case "circle":
        return (
          <circle
            cx={x + width / 2}
            cy={y + height / 2}
            r={width / 2}
            fill={fill}
            stroke={stroke}
          ></circle>
        );
      case "ellipse":
        return (
          <ellipse
            cx={x + width / 2}
            cy={y + height / 2}
            rx={width / 2}
            ry={height / 2}
            fill={fill}
            stroke={stroke}
          />
        );
      case "triangle":
        return (
          <polygon
            points={`${x + width / 2},${y} ${x},${y + height} ${x + width},${
              y + height
            }`}
            fill={fill}
            stroke={stroke}
          />
        );
      case "diamond":
        return (
          <polygon
            points={`${x + width / 2},${y} ${x},${y + height / 2} ${
              x + width / 2
            },${y + height} ${x + width},${y + height / 2}`}
            fill={fill}
            stroke={stroke}
          />
        );
      case "image":
        return <image width={width} height={height} href={href} x={x} y={y} />;
      case "start":
        return (
          <polygon
          points={`${x + width / 2},${y} ${x + width * 1/ 5},${y + height} ${x + width},${y + height * 2 / 5}
          ${x},${y + height * 2 / 5 } ${x + width * 4 / 5},${y + height}
          `}
            fill={fill}
            stroke={stroke}
          />
        )
      default:
        return <polygon></polygon>;
    }
  }

  return (
    <g
      onMouseDown={(e) => handleDragStart(e)}
      onMouseEnter={() => showAnchor()}
      onMouseLeave={() => hideAnchor()}
      onClick={(e) => setCurrentNode(e)}
    >
      {getContent(type)}
      <CenterText {...props} />
      <Anchors {...props}></Anchors>
    </g>
  );
}
